<style scoped>
.layui-row {
    overflow: hidden;
}

.select-item {
    width: 34.333333%;
    float: right;
}

.layui-row:after,
.layui-row:before {
    clear: none;
}
</style>

<template>
<div class="department">

    <form class="layui-form ">
        <div class="layui-col-lg4 select-item" style="text-align: right;width: auto">
            <div class="layui-inline" style="width: 200px">
                <input type="text" autocomplete="off"  v-model="dailydata" name="dailydata" id="dailydata" placeholder="请选择日报日期" class="layui-input key">
            </div>
            <button type="button" class="layui-btn sou" @click="search">搜索</button>
            <button type="button" class="layui-btn sou" @click="exportRpt">导出excel</button>
        </div>
    </form>

    <table class="layui-table layui-form">
        <thead>
             <tr>
                                <th>渠道</th>
                                <th>月销售计划</th>
                                <th>实际订单量</th>
                                <th>已发货数量</th>
                                <th>待加工</th>
                                <th>今日发货量</th>
                                <th>今日新增回款（元）</th>
                                <th>累计回款（元）</th>
                                <th>销售计划完成率</th>
                                <th>生产订单完成率</th>
            </tr>
        </thead>
        <tbody>
            <tr class="id9" v-for="(val, index) in productiondaily" :key="index">
                <td>{{val.depart}}</td>
                <td>{{val.planweight.toFixed(2)}}</td>
                <td>{{val.actualweight.toFixed(4)}} </td>
                <td>{{val.shipweight.toFixed(4)}} </td>
                <td>{{val.tbeproweight.toFixed(4)}}</td>
                <td>{{val.todayweight.toFixed(4)}}</td>
                <td>{{val.todaypayback.toFixed(2)}}</td>
                <td>{{val.totalpayback.toFixed(2)}}</td>
                <td>{{val.planpoint.toFixed(2)}}%</td>
                <td>{{val.producepoint.toFixed(2)}}%</td>
            </tr>
        </tbody>
        <tbody v-if="productiondaily.length!==0" class="tbody_back">
            <td>{{monthlyrpt.monthly.substr(5)}}月合计</td>
            <td>{{monthlyrpt.planweight.toFixed(2)}}</td>
            <td>{{monthlyrpt.actualweight.toFixed(4)}} </td>
            <td>{{monthlyrpt.shipweight.toFixed(4)}} </td>
            <td>{{monthlyrpt.tbeproweight.toFixed(4)}}</td>
            <td>{{monthlyrpt.todayweight.toFixed(4)}}</td>
            <td>{{monthlyrpt.todaypayback.toFixed(2)}}</td>
            <td>{{monthlyrpt.totalpayback.toFixed(2)}}</td>
            <td>——</td>
            <td>——</td>
        </tbody>
        <tbody v-if="productiondaily.length!==0" class="tbody_back1">
            <td>1-{{monthlyrpt.monthly.substr(5)}}月累计</td>
            <td>{{(allyrpt.planweight+monthlyrpt.planweight).toFixed(2)}}</td>
            <td>{{(allyrpt.actualweight+monthlyrpt.actualweight).toFixed(4)}} </td>
            <td>{{(allyrpt.shipweight+monthlyrpt.shipweight).toFixed(4)}} </td>
            <td>{{(allyrpt.tbeproweight+monthlyrpt.tbeproweight).toFixed(4)}}</td>
            <td>{{(allyrpt.todayweight+monthlyrpt.todayweight).toFixed(4)}}</td>
            <td>{{(allyrpt.todaypayback+monthlyrpt.todaypayback).toFixed(2)}}</td>
            <td>{{(allyrpt.totalpayback+monthlyrpt.totalpayback).toFixed(2)}}</td>
            <td>——</td>
            <td>——</td>
        </tbody>

    </table>
</div>
</template>

<script>
let qs = require('qs');
export default {
    name: 'DailyDispatchReport',
    data() {
        return {
            currentPage: 1,
            totalPage: 0,
            dailydata: "",
            productiondaily: [],
            monthlyrpt: {},
            allyrpt: {}
        }
    },
    mounted() {
        let that = this;
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#dailydata' //指定元素
            });
        });
        that.getList()
    },
    methods: {
        search: function () {
            var that = this //固定化指针
            let loader = layui.layer.load();
            that.dailydata = $('#dailydata').val(); //jq 获取

            if (that.dailydata == "") { //判断日期不可以为空
                that.alert("请选调度日报日期")
                layer.close(loader);
                return
            }
            this.$post('/sales/ScheduldailyRpt!getDailyRpt.action', qs.stringify({
                    "date": that.dailydata
                }))
                .then(response => {
                    console.log(response)
                    if (response.data.msg == 'success') {
                        if (Object.keys(response.data.rpt).length == 0) { //判断查询出来的数据
                            that.alert("查询调度数据为空")
                        }
                        that.productiondaily = response.data.rpt.dailyrpt;
                        that.monthlyrpt = response.data.rpt.monthlyrpt
                        that.allyrpt = response.data.rpt.allyrpt
                        layer.close(loader);
                        console.log(that.productiondaily)
                    } else {
                        that.alert("系统错误");
                        layer.close(loader);
                    }
                })
        },
        //页面自动加载
        getList() {
            var that = this
            Date.prototype.Format = function (fmt) {
                var o = {
                    "M+": this.getMonth() + 1, //月份 
                    "d+": this.getDate(), //日 
                    "H+": this.getHours(), //小时 
                    "m+": this.getMinutes(), //分 
                    "s+": this.getSeconds(), //秒 
                    "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                    "S": this.getMilliseconds() //毫秒 
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;

            }
            var time = new Date().Format("yyyy-MM-dd"); //格式化当前日期
            let loader = layui.layer.load();
           this.dailydata=time
            //进入页面直接查询调度日报表
            this.$post('/sales/ScheduldailyRpt!getDailyRpt.action', qs.stringify({ //qs//对象序列化成URL的形式
                    "date": time
                }))
                .then(response => {
                    if (response.data.msg == 'success') {
                         that.productiondaily = response.data.rpt.dailyrpt;
                        that.monthlyrpt = response.data.rpt.monthlyrpt
                        that.allyrpt = response.data.rpt.allyrpt
                        layer.close(loader);
                    } else {
                        that.alert("系统错误");
                        layer.close(loader);
                    }
                })
        },
        //导出excel
        exportRpt: function () {
            var that = this //固定化指针
            that.dailydata = $('#dailydata').val(); //jq 获取
            if (that.dailydata == "") { //判断日期不可以为空
                that.alert("请选调度日报日期")
                return
            }
            window.location.href = "/sales/ScheduldailyRpt!exportDailyRpt.action?date=" + that.dailydata;
        },
    }
}
</script>
<style scoped>
.tbody_back{
    background-color:#99E6D2;
}
.tbody_back1{
    background-color:#70d1b7;
}
</style>
